feat/light-mode #444
feat/light-mode #444
Conversation
WalkthroughAdds runtime theming (data-theme, AppThemeStore, header toggle), wires theme into comment/author/card components to control gradients, introduces Tailwind theme-variants and theme-scoped CSS tokens, and applies widespread presentational and accessibility updates across article/author/card/button/footer/navigation components. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant RootShell
participant AppThemeStore
participant Header
participant Components
User->>RootShell: Load app
RootShell->>AppThemeStore: read theme
AppThemeStore-->>RootShell: theme()
RootShell->>Header: bind [theme]=theme()
Header->>User: render toggle icon (sun/moon)
User->>Header: click toggle
Header->>RootShell: emit themeToggle
RootShell->>AppThemeStore: toggleTheme()
AppThemeStore->>document: set data-theme attribute
AppThemeStore-->>RootShell: updated theme()
RootShell->>Components: components read theme() and update hideGradient / classes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
PR is detected, will deploy to dev environment |
|
Deployed to dev environment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (2)
libs/blog/become-author/feature-become-author-page/src/lib/become-author-page/become-author-page.component.html (2)
34-34: Consider using theme-aware text color for improved theme compatibilityWhile white text works well on the pink background, if the button background color might change based on theme, consider using a theme-aware text color class.
If the button background remains pink in all themes, this change is fine. Otherwise, consider:
- <p class="text-sm font-bold text-white"> + <p class="text-sm font-bold text-al-pink-foreground">This assumes you have defined appropriate foreground colors for your themed backgrounds.
64-64: Consider using theme-aware text color for improved theme compatibilitySimilar to the other button, if the background color remains pink in all themes, white text is appropriate. For full theme support, consider a variable-based approach.
If the button background remains pink in all themes, this change is fine. Otherwise, consider using a theme-aware text color that complements the button background.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
apps/blog/src/assets/icons/arrow-down.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (30)
libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.html(2 hunks)libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.ts(0 hunks)libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html(1 hunks)libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.ts(2 hunks)libs/blog/articles/ui-article-card/src/lib/components/article-hero-card/article-hero-card-skeleton.component.ts(1 hunks)libs/blog/articles/ui-article-card/src/lib/components/article-horizontal-card/article-horizontal-card.component.html(1 hunks)libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html(3 hunks)libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.html(1 hunks)libs/blog/articles/ui-article-list-title/src/lib/ui-article-list-title/ui-article-list-title.component.html(1 hunks)libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts(2 hunks)libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.html(1 hunks)libs/blog/become-author/feature-become-author-page/src/lib/become-author-page/become-author-page.component.html(2 hunks)libs/blog/become-author/feature-become-author-page/src/lib/components/become-author-list-item/become-author-list-item.component.html(1 hunks)libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-logo.component.ts(2 hunks)libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-social-media-icons.component.ts(1 hunks)libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html(1 hunks)libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.scss(1 hunks)libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.html(3 hunks)libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.ts(1 hunks)libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html(1 hunks)libs/blog/partners/ui-partners/src/lib/partners-list/partners-list.component.html(1 hunks)libs/blog/shared/ui-card/src/lib/card.component.ts(2 hunks)libs/blog/shared/ui-card/src/lib/card.stories.ts(1 hunks)libs/blog/shared/ui-difficulty/src/lib/ui-difficulty.component.ts(3 hunks)libs/blog/shared/ui-pill/src/lib/pill.directive.ts(1 hunks)libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.html(1 hunks)libs/blog/writing-rules/feature-writing-rules/src/lib/rules-row/rules-row.component.html(2 hunks)libs/shared/assets/src/lib/styles/main.scss(1 hunks)package.json(1 hunks)tailwind.preset.js(2 hunks)
💤 Files with no reviewable changes (1)
- libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.ts
🧰 Additional context used
🧬 Code Graph Analysis (1)
libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.ts (1)
libs/blog/shared/types/src/lib/article-card.ts (1)
ArticleCard(1-13)
🔇 Additional comments (48)
package.json (1)
67-67: Verify plugin version compatibility
The plugin is added as a beta release; please confirm that2.0.0-beta.0oftailwindcss-theme-variantsis compatible with Tailwind CSS^3.3.6and appropriate for production use.libs/blog/shared/ui-card/src/lib/card.stories.ts (1)
61-61: Demonstration of transparent background variant
This story correctly showcases the transparent background use case by applyingbg-transparentto the<al-card>element.libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html (1)
8-8: Consistent use of primary-foreground token
Applyingtext-al-primary-foregroundensures that the heading color adapts to theme variants and remains consistent across light/dark modes.libs/blog/articles/ui-article-card/src/lib/components/article-hero-card/article-hero-card-skeleton.component.ts (1)
10-10: Consistent transparent background
Addingbg-transparentaligns the skeleton card with the new light-mode theming, ensuring the skeleton blends correctly across themes.libs/blog/articles/ui-article-card/src/lib/components/article-horizontal-card/article-horizontal-card.component.html (1)
3-3: Verify removal of fixed height
Removingmax-h-52in favor of theme-based styling could affect the card's vertical sizing. Please verify that the card height remains consistent and does not overflow its container across breakpoints.libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.html (1)
45-45: Apply theme-aware text color
Addingtext-al-foregroundensures the author name responds to light/dark mode variants and aligns with the new theming tokens. Looks good.libs/blog/partners/ui-partners/src/lib/partners-list/partners-list.component.html (1)
6-6: Verify dark mode background color
Withbg-whitestill applied, this element may not adapt its background in dark mode. Please confirm thatbg-whiteis intended, or consider using a theme-variant class (e.g.,dark:bg-al-card) so the background aligns with dark theme.libs/blog/articles/ui-article-list-title/src/lib/ui-article-list-title/ui-article-list-title.component.html (1)
4-4: Standardize primary heading color
Addingtext-al-primary-foregroundensures the title adheres to the new primary text color token and is consistent with other headings across the app.libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.html (1)
15-18: LGTM! Improved consistency across card variantsAdding the
imagePriorityinput to the compact card variant brings consistency with the other card types and enables image loading optimization.libs/blog/writing-rules/feature-writing-rules/src/lib/rules-row/rules-row.component.html (2)
14-14: Good addition of explicit text colorAdding the
text-whiteclass ensures the step numbers maintain proper contrast with the pink background in both light and dark modes.
49-49: Proper contrast for button textThe addition of
text-whiteensures the button text has adequate contrast against the pink background regardless of theme, supporting accessibility.libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.html (3)
2-2: Good use of semantic color tokenUsing
text-al-primary-foregroundfor the title enables proper theme adaptation instead of a hard-coded color value.
6-6: Appropriate background setting for theme supportSetting the card to
bg-transparentallows it to properly inherit background colors when switching between light and dark themes.
38-38: Consistent use of semantic color tokenUsing
text-al-primary-foregroundfor the authors title maintains styling consistency with the main title and supports theme adaptation.libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.html (3)
9-9: Improved layout with centered navigationAdding
justify-centerimproves the horizontal navigation layout by properly centering the navigation items.
24-25: Good implementation of theme-aware text stylingReplacing static text color with conditional styling
[ngClass]="whiteFont() ? 'text-white' : 'text-al-foreground'"enables proper text color adaptation based on context and theme.Make sure the
whiteFont()input property is properly implemented in the component TypeScript file and documented for consumers of this component.
37-38: Consistent styling for external linksThe same conditional text styling is correctly applied to external links, maintaining styling consistency across all navigation items.
libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-logo.component.ts (1)
2-2: Good component simplificationRemoving the unused
inputimport and thecurrentYearproperty simplifies the component appropriately. This cleanup removes unnecessary functionality while maintaining the component's core purpose.Ensure that any components using
<al-footer-logo>no longer pass thecurrentYearinput property, as it has been removed.Also applies to: 23-23
libs/blog/become-author/feature-become-author-page/src/lib/components/become-author-list-item/become-author-list-item.component.html (3)
3-5: Consistent trailing comma in[ngClass]object literal
The trailing comma after the single entry is valid and aligns with our formatting conventions for multiline object literals.
11-11: Explicittext-whiteclass applied for contrast
Addingtext-whiteensures the index label remains legible against the pink background.
15-15: Use oftext-al-pinktoken for the tick icon
Thetext-al-pinktoken aligns with our design system’s color palette.libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html (1)
5-6: Footer logo and navigation setup looks good
Explicitly centering the logo and passingwhiteFont="true"to<al-navigation>ensures consistent styling.libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.scss (2)
15-17: Updated default grid-template-areas
The new two-row layout ('logo social'/'nav nav') is clear and concise for smaller viewports.
19-23: Verify breakpoint rename from@screen xlto@screen lg
Dropping the MD breakpoint and shifting the XL layout to LG may alter mid-size layouts. Please confirm that the updated breakpoints align with the design mockups and QA in all viewport widths.libs/shared/assets/src/lib/styles/main.scss (2)
11-17: New CSS variables for theming added
Introducing--primary-foregroundand--greycompletes the palette for both light and dark modes. This aligns with the Tailwind configuration’s new tokens.
19-29: Light-mode media query block implemented
Theprefers-color-scheme: lightoverride correctly defines lighter values for all variables, enabling automatic theme switching.libs/blog/shared/ui-card/src/lib/card.component.ts (2)
71-73: GradientCardDirective classes updated for theme variants
Switching to'bg-al-radial-gradient dark:bg-al-background'removes the border and adds a dark-mode fallback—this matches our updated theming strategy.
99-101: Ensure component and directivehostClassesmerge correctly
BothCardComponentand a consumer ofalGradientCardbind to theclassattribute. Please verify in the rendered DOM that classes from both the component and the directive are applied and not overridden.libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts (3)
11-11: Great conversion to standalone component!This conversion to a standalone component aligns with modern Angular best practices and improves the component's modularity.
23-24: Properly implemented light/dark mode stylingThe
alGradientCarddirective and conditional dark/light mode classes are correctly applied, ensuring consistent styling that adapts to the theme. The background styling appropriately uses different colors for each theme variant.
27-28: LGTM: Content styling with directiveAdding the
alCardContentdirective to the inner content maintains styling consistency with other card components in the application.libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html (3)
3-3: Improved positioning and container stylingThe addition of
relative,overflow-hidden, andbg-blackclasses properly prepares the container for the new image layering approach.
6-13: Great improvement using proper image elementsReplacing CSS background with an actual
<img>element is a significant improvement that:
- Enhances accessibility with proper alt text
- Enables image optimization through NgOptimizedImage
- Provides better loading control with the priority attribute
- Makes explicit width/height handling possible
The absolute positioning with opacity control creates a nice background effect while maintaining content readability.
14-14: Proper text color handlingThe explicit text color setting ensures good contrast over the background image in all scenarios.
libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.ts (2)
1-1: Well-implemented standalone component conversionThe component has been properly converted to standalone with all necessary imports. Including NgOptimizedImage enables better image loading performance and optimization.
Also applies to: 13-20
25-25: Good addition of image priority controlThe new
imagePriorityinput property allows control over image loading priority, which is important for performance optimization and core web vitals. This aligns with the template changes using this property.libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html (5)
3-3: Improved border styling for theme consistencyThe border styling now properly handles light and dark mode variations, maintaining visual separation in light mode while using transparent borders in dark mode.
21-25: Enhanced avatar component with priority loadingAdding the
[priority]binding to the avatar component improves loading performance for this important UI element.
26-28: Proper text color styling for author nameThe explicit text color class ensures consistent styling across light and dark modes.
41-47: Improved heading styling with proper color and text propertiesThe heading now uses explicit color, font weight, and style classes, ensuring consistent appearance across theme modes.
48-50: Consistent paragraph styling with theme-aware colorsThe paragraph styling now properly uses theme-specific colors with appropriate font styling.
tailwind.preset.js (4)
1-5: Excellent addition of theme variant supportGood job introducing the
tailwindcss-theme-variantsplugin which enables media query-based theme switching. This is a more modern approach than the class-based dark mode.
13-14: New color tokens look goodThe addition of 'al-primary-foreground' and 'al-grey' tokens will help maintain consistent theming across light and dark modes.
Also applies to: 22-22
35-35: Box shadow color change looks intentionalChanging from
--borderto--greyfor theal-full-bordershadow matches the new theming approach. Just ensure this change doesn't unexpectedly affect existing components.
39-51: Well-structured theme configurationThe plugin configuration properly sets up light and dark themes using media queries. This approach allows the UI to automatically adapt to the user's system preferences.
libs/blog/shared/ui-difficulty/src/lib/ui-difficulty.component.ts (3)
28-30: Good adaptation for light/dark mode in left blockThe conditional class application correctly handles both light and dark modes based on the
isColorBackground()condition:
- Using
dark:bg-al-background bg-transparentfor colored backgrounds- Using
bg-al-greyfor non-colored backgroundsThis approach maintains visual consistency across themes.
47-50: Well-implemented shadow handling for different themesThe shadow classes are properly updated for the dot container:
dark:shadow-al-full-background shadow-transparentfor colored backgroundsshadow-al-full-borderfor non-colored backgroundsThis ensures proper visual representation in both light and dark modes.
80-82: Consistent styling in right blockThe right block styling matches the left block's implementation, maintaining design consistency throughout the component. The code cleanly handles both light and dark themes.
| @@ -9,7 +9,7 @@ import { SocialMediaIconsComponent } from '@angular-love/blog/shared/ui-social-m | |||
| <div class="flex flex-col items-start"> | |||
| <h3 | |||
| id="social-media-title" | |||
| class="mb-4 hidden text-sm font-bold lg:block" | |||
| class="mb-4 hidden text-sm font-bold text-[#fff] lg:block" | |||
There was a problem hiding this comment.
Use design token instead of hardcoded hex
To support dynamic theming and maintain consistency with other components, replace the literal hex color with the text-al-primary-foreground token:
- class="mb-4 hidden text-sm font-bold text-[#fff] lg:block"
+ class="mb-4 hidden text-sm font-bold text-al-primary-foreground lg:block"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| class="mb-4 hidden text-sm font-bold text-[#fff] lg:block" | |
| class="mb-4 hidden text-sm font-bold text-al-primary-foreground lg:block" |
| @@ -9,7 +9,7 @@ const pillVariants = cva( | |||
| { | |||
| variants: { | |||
| variant: <Record<AlPillVariant, string>>{ | |||
| flat: 'bg-al-primary/90', | |||
| flat: 'bg-al-primary/90 text-white', | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use design token for pill text color
For theme variant compatibility, replace text-white with the text-al-primary-foreground token in the flat variant:
- flat: 'bg-al-primary/90 text-white',
+ flat: 'bg-al-primary/90 text-al-primary-foreground',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| flat: 'bg-al-primary/90 text-white', | |
| flat: 'bg-al-primary/90 text-al-primary-foreground', |
libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.html
Outdated
Show resolved
Hide resolved
| @@ -32,6 +32,7 @@ export type NavItem = { | |||
| }) | |||
| export class NavigationComponent { | |||
| readonly layout = input<'vertical' | 'horizontal'>('horizontal'); | |||
| readonly whiteFont = input<boolean>(false); | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider a more flexible theming approach instead of a boolean flag
While adding a whiteFont input provides basic text color control, a more comprehensive theming approach would better support light mode implementation.
Consider using a theme enum or string input that supports multiple theme options:
- readonly whiteFont = input<boolean>(false);
+ readonly textTheme = input<'default' | 'light' | 'dark' | 'contrast'>('default');Then in the template, you could apply different classes based on the selected theme:
[ngClass]="{
'text-white': textTheme() === 'light',
'text-al-foreground': textTheme() === 'default',
'text-al-primary': textTheme() === 'dark',
'text-al-contrast': textTheme() === 'contrast'
}"This approach would be more maintainable as you add more theme variants beyond just light mode.
| <small class="block pb-4 text-center text-xs text-[#6a798b]"> | ||
| Copyright © {{ currentYear }} | ||
| </small> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Hardcoded text color for copyright; use token
The inline text-[#6a798b] will not adjust for light mode. Swap in the design token (e.g., text-al-grey).
- <small class="block pb-4 text-center text-xs text-[#6a798b]">
+ <small class="block pb-4 text-center text-xs text-al-grey">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <small class="block pb-4 text-center text-xs text-[#6a798b]"> | |
| Copyright © {{ currentYear }} | |
| </small> | |
| <small class="block pb-4 text-center text-xs text-al-grey"> | |
| Copyright © {{ currentYear }} | |
| </small> |
| @@ -1,17 +1,16 @@ | |||
| <footer class="bg-al-card w-full"> | |||
| <footer class="w-full bg-[#191a22]"> | |||
There was a problem hiding this comment.
Hardcoded background color blocks theming
Using bg-[#191a22] ties the footer to one static color and prevents automatic switching in light mode. Replace this with a theme-aware token (e.g., bg-al-background).
-<footer class="w-full bg-[#191a22]">
+<footer class="w-full bg-al-background">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <footer class="w-full bg-[#191a22]"> | |
| <footer class="w-full bg-al-background"> |
|
PR is detected, will deploy to dev environment |
|
Deployed to dev environment |
|
PR is detected, will deploy to dev environment |
|
Deployed to dev environment |
|
PR is detected, will deploy to dev environment |
|
Deployed to dev environment |
|
PR is detected, will deploy to dev environment |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
libs/blog/app-theme/data-access-app-theme/src/app-theme.store.ts (1)
42-42: Consider addressing the architectural TODO.The TODO comment highlights a valid architectural concern about decoupling the store from
CCAppThemeConsumer. Consider creating an interface to improve testability and modularity.Would you like me to help design an interface to decouple the theme store from the consumer implementation?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
apps/blog/src/assets/icons/moon.svgis excluded by!**/*.svgapps/blog/src/assets/icons/sun.svgis excluded by!**/*.svg
📒 Files selected for processing (5)
libs/blog/app-theme/data-access-app-theme/src/app-theme.store.ts(3 hunks)libs/blog/layouts/ui-layouts/src/lib/header/header.component.ts(3 hunks)libs/blog/shared/ui-icon/src/lib/icon/icon.component.ts(1 hunks)libs/blog/shell/feature-shell-web/src/lib/root-shell.component.ts(4 hunks)libs/shared/assets/src/lib/styles/main.scss(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- libs/blog/shared/ui-icon/src/lib/icon/icon.component.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- libs/shared/assets/src/lib/styles/main.scss
🧰 Additional context used
🧬 Code Graph Analysis (1)
libs/blog/shell/feature-shell-web/src/lib/root-shell.component.ts (1)
libs/blog/app-theme/data-access-app-theme/src/app-theme.store.ts (1)
AppThemeStore(11-34)
🔇 Additional comments (11)
libs/blog/app-theme/data-access-app-theme/src/app-theme.store.ts (4)
3-3: Good addition of patchState import.The import of
patchStateis necessary for properly updating the signal store state in the new methods.
5-5: Good export of Theme type for reusability.Exporting the
Themetype allows other components to import and use the same type definition, promoting type consistency across the application.
27-31: Excellent implementation of theme toggle functionality.The
toggleThememethod correctly:
- Toggles between 'dark' and 'light' themes
- Updates the DOM attribute via the consumer
- Patches the store state with the new theme
The logic is clean and follows the signal store pattern properly.
45-47: Improvement: Using data attributes instead of CSS classes.The change from
setThemeClasstosetThemeAttributeis a good architectural improvement. Usingdata-themeattributes instead of CSS classes provides better separation of concerns and is more semantic for theme management.libs/blog/shell/feature-shell-web/src/lib/root-shell.component.ts (3)
79-81: Clean integration of theme store.The injection of
AppThemeStoreand creation of a computedthemesignal provides reactive theme state to the template. This follows Angular best practices for signal-based state management.
31-33: Proper template integration for theme management.The template correctly:
- Passes the reactive
theme()signal to the header component- Handles the
themeToggleevent to trigger theme switchingThis creates a clean data flow from store → shell → header.
104-106: Simple and effective theme toggle handler.The
onThemeTogglemethod correctly delegates to the store'stoggleThememethod, maintaining separation of concerns between UI events and state management.libs/blog/layouts/ui-layouts/src/lib/header/header.component.ts (4)
83-83: Well-typed theme input.The
themeinput is properly typed as'light' | 'dark'and marked as required, ensuring type safety and preventing undefined theme states.
87-87: Clean event-driven architecture.The
themeToggleoutput event follows Angular patterns for component communication, allowing the parent component to handle theme changes appropriately.
91-93: Intuitive icon selection logic.The
themeSwitchIconcomputed property correctly shows:
- Moon icon in light mode (to indicate switching to dark)
- Sun icon in dark mode (to indicate switching to light)
This provides clear visual indication of the toggle action.
41-52: Excellent accessibility and styling for theme toggle.The theme toggle button implementation includes:
- Proper
aria-labelfor screen readers- Clean styling with transparent background
- Proper click event handling
- Test ID for automated testing (once typo is fixed)
- Semantic use of SVG icons
This provides a great user experience for theme switching.
| aria-label="Toggle theme" | ||
| class="flex items-center bg-transparent p-1" | ||
| (click)="themeToggle.emit()" | ||
| date-testid="header-theme-switch" |
There was a problem hiding this comment.
Fix typo in data attribute.
There's a typo in the test ID attribute.
Apply this diff to fix the typo:
- date-testid="header-theme-switch"
+ data-testid="header-theme-switch"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| date-testid="header-theme-switch" | |
| data-testid="header-theme-switch" |
🤖 Prompt for AI Agents
In libs/blog/layouts/ui-layouts/src/lib/header/header.component.ts at line 45,
there is a typo in the data attribute "date-testid". Change "date-testid" to the
correct attribute "data-testid" to fix the typo.
|
Deployed to dev environment |
|
PR is detected, will deploy to dev environment |
|
Deployed to dev environment |
|
PR is detected, will deploy to dev environment |
|
Deployed to dev environment |
|
PR is detected, will deploy to dev environment |
|
Deployed to dev environment |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
tailwind.preset.js (1)
1-1: Remove unused import or utilize the imported themeVariants.The
themeVariantsimport from 'tailwindcss-theme-variants' is not being used in the plugins array. You're implementing a custom plugin instead.Apply this diff to remove the unused import:
-const { themeVariants } = require('tailwindcss-theme-variants');Alternatively, if you intend to use the library's implementation, replace the custom plugin with:
-const { themeVariants } = require('tailwindcss-theme-variants'); +const { themeVariants } = require('tailwindcss-theme-variants'); // In plugins array: - function ({ addVariant }) { - addVariant( - 'light', - '&:where([data-theme="light"], [data-theme="light"] *)', - ); - addVariant('dark', '&:where([data-theme="dark"], [data-theme="dark"] *)'); - }, + themeVariants({ + themes: { + light: 'selector', + dark: 'selector' + } + }),
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.html(2 hunks)libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.ts(2 hunks)libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.html(1 hunks)libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts(2 hunks)libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.html(2 hunks)libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.ts(1 hunks)libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-social-media-icons.component.ts(1 hunks)libs/blog/shared/ui-button/src/lib/button/button.component.ts(1 hunks)libs/blog/shared/ui-card/src/lib/card.component.ts(2 hunks)libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.html(1 hunks)libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.ts(2 hunks)libs/shared/assets/src/lib/styles/main.scss(2 hunks)tailwind.preset.js(2 hunks)
✅ Files skipped from review due to trivial changes (2)
- libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.html
- libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.ts
🚧 Files skipped from review as they are similar to previous changes (8)
- libs/blog/shared/ui-button/src/lib/button/button.component.ts
- libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-social-media-icons.component.ts
- libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.html
- libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.html
- libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.html
- libs/shared/assets/src/lib/styles/main.scss
- libs/blog/shared/ui-card/src/lib/card.component.ts
- libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts
🧰 Additional context used
🧬 Code Graph Analysis (1)
libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.ts (1)
libs/blog/app-theme/data-access-app-theme/src/app-theme.store.ts (1)
AppThemeStore(11-38)
🔇 Additional comments (10)
libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.ts (3)
4-6: LGTM: Modern Angular signal importsGood adoption of Angular's signal-based reactive programming with
computedandinput.
15-15: LGTM: Well-defined variant typeThe type definition provides good type safety for the theming variants.
27-27: LGTM: Modern input signal usageUsing Angular's signal-based input with a sensible default value follows current best practices.
libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.ts (3)
19-19: LGTM! Clean integration with the theme system.The import correctly adds the
AppThemeStorefollowing the established import pattern and module structure.
45-45: Excellent use of modern Angular patterns.The injection uses the proper
inject()function and correctly accesses the theme signal from the store. Thereadonlymodifier appropriately prevents direct modification.
47-47: Well-implemented theme-aware computed property.The computed property correctly implements the gradient hiding logic for light mode using Angular's reactive patterns. The naming is descriptive and the logic is straightforward and appropriate.
tailwind.preset.js (4)
5-5: LGTM: Appropriate darkMode configuration for attribute-based theming.The change from
['class']to'selector'correctly aligns with the data-theme attribute approach used throughout the application.
10-11: LGTM: New color token follows established pattern.The
al-primary-foregroundcolor token is properly defined using the CSS variable pattern with alpha value support.
19-19: LGTM: Grey color token addition supports theming system.The
al-greycolor token follows the established pattern and will be used in the updated box shadow configuration.
32-32: LGTM: Box shadow color update aligns with new color tokens.The change from
--borderto--greyCSS variable correctly utilizes the newly addedal-greycolor token.
libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.ts
Outdated
Show resolved
Hide resolved
| plugins: [ | ||
| function ({ addVariant }) { | ||
| addVariant( | ||
| 'light', | ||
| '&:where([data-theme="light"], [data-theme="light"] *)', | ||
| ); | ||
| addVariant('dark', '&:where([data-theme="dark"], [data-theme="dark"] *)'); | ||
| }, | ||
| ], |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify the custom plugin selector syntax.
The custom theme variant plugin implementation looks correct for data-theme attribute targeting. However, verify that the :where() pseudo-class with descendant selectors works as expected across all target browsers.
Run this script to verify the plugin generates the expected CSS selectors:
🏁 Script executed:
#!/bin/bash
# Description: Test Tailwind CSS compilation with the new theme variants
# Expected: CSS output should contain proper light: and dark: variant selectors
# Create a test Tailwind config to verify selector generation
cat > test-config.js << 'EOF'
const preset = require('./tailwind.preset.js');
module.exports = {
presets: [preset],
content: ['./test.html'],
safelist: ['light:bg-red-500', 'dark:bg-blue-500']
};
EOF
# Create a test HTML file with theme variants
cat > test.html << 'EOF'
<div class="light:bg-red-500 dark:bg-blue-500">Test</div>
EOF
# Check if npx tailwindcss is available and compile
if command -v npx >/dev/null 2>&1; then
echo "Compiling Tailwind CSS to verify theme variants..."
npx tailwindcss -c test-config.js -i /dev/stdin -o test-output.css << 'EOF'
@tailwind utilities;
EOF
echo "Generated selectors for theme variants:"
grep -A 5 -B 5 "data-theme" test-output.css || echo "No theme selectors found"
# Clean up
rm -f test-config.js test.html test-output.css
else
echo "Tailwind CSS CLI not available for testing"
fiLength of output: 774
Let’s retry the compilation using a real CSS input file instead of STDIN:
🏁 Script executed:
#!/usr/bin/env bash
# Description: Corrected test for Tailwind CSS theme-variant plugin
# 1. Create a Tailwind config that uses our preset
cat > test-config.js << 'EOF'
const preset = require('./tailwind.preset.js');
module.exports = {
presets: [preset],
content: ['./test.html'],
safelist: ['light:bg-red-500', 'dark:bg-blue-500'],
};
EOF
# 2. Create an HTML file to trigger both variants
cat > test.html << 'EOF'
<div class="light:bg-red-500 dark:bg-blue-500">Test</div>
EOF
# 3. Create an input CSS file with utilities directive
cat > input.css << 'EOF'
@tailwind utilities;
EOF
# 4. Compile and grep for theme selectors
if command -v npx >/dev/null 2>&1; then
echo "Compiling with input.css…"
npx tailwindcss -c test-config.js -i input.css -o test-output.css
echo "Looking for generated theme selectors in test-output.css:"
grep -E -A2 -B2 '\[data-theme="light"\]|\[data-theme="dark"\]' test-output.css || echo "No theme selectors found"
else
echo "Tailwind CSS CLI not found; please install it and retry."
fi
# 5. Cleanup
rm -f test-config.js test.html input.css test-output.cssLength of output: 1854
Fix missing tailwindcss-theme-variants dependency
The Tailwind preset currently fails to compile because it calls require('tailwindcss-theme-variants') in tailwind.preset.js but that package isn’t installed. You’ll need to add it (or remove the import) before you can verify the :where()-based light/dark variant selectors:
• In your project root, run:
npm install --save-dev tailwindcss-theme-variants
• Or, if you don’t intend to use the external plugin, delete the require('tailwindcss-theme-variants') line at the top of tailwind.preset.js.
• After resolving the dependency, re-run the Tailwind CLI test to grep for [data-theme="light"] and [data-theme="dark"] in the generated CSS and confirm the custom variant selectors are emitted as expected.
🤖 Prompt for AI Agents
In tailwind.preset.js around lines 36 to 44, the code requires the
'tailwindcss-theme-variants' package which is missing, causing compilation
failure. Fix this by installing the package with 'npm install --save-dev
tailwindcss-theme-variants' in the project root, or if you do not need it,
remove the require statement from the top of tailwind.preset.js. After fixing
the dependency, rerun the Tailwind CLI test to verify that the custom light and
dark variant selectors using :where() are correctly generated in the CSS output.
|
PR is detected, will deploy to dev environment |
|
Deployed to dev environment |
DamianBrzezinskiHoA
force-pushed
the
feature/light-mode
branch
from
70811f3 to
e957263
Compare
|
PR is detected, will deploy to dev environment |
|
Deploy failed, please check the logs in jenkins for more details. |
There was a problem hiding this comment.
Actionable comments posted: 9
🔭 Outside diff range comments (3)
libs/blog/partners/ui-partners/src/lib/partners-list/partners-list.component.html (2)
5-10: Add rel="noopener noreferrer" for external link securityExternal links with target="_blank" should include rel="noopener noreferrer" to prevent reverse tabnabbing and improve performance.
Apply this diff:
- target="_blank" + target="_blank" rel="noopener noreferrer"
12-17: Specify sizes for NgOptimizedImage with fill to improve image selectionWith fill, providing sizes helps the browser pick the correct resource and reduces bandwidth. Based on the container’s max widths, 160px base and 200px from md breakpoint:
Apply this diff:
<img class="object-scale-down p-1" [ngSrc]="partner.asset_URL" [alt]="partner.alt" + sizes="(min-width: 768px) 200px, 160px" fill />libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.html (1)
4-11: Fix duplicate class attributes on— earlier one gets overridden
The UL currently has two class attributes (one static, one later static) plus [class] and [ngClass]. In HTML, duplicate class attributes are invalid; the later class wins, so justify-center is effectively lost. Consolidate to a single static class and a single [ngClass].
Apply this diff:
- <ul - class="flex flex-wrap justify-center" - [ngClass]="{ - 'flex-col justify-between': layout() === 'vertical', - }" - class="flex flex-wrap" - [attr.aria-label]="t('nav.navLinks')" - [class]="isVerticalLayout ? 'flex-col justify-between' : ''" - > + <ul + class="flex flex-wrap justify-center" + [ngClass]="{ 'flex-col justify-between': layout() === 'vertical' }" + [attr.aria-label]="t('nav.navLinks')" + >
🧹 Nitpick comments (8)
libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.scss (2)
13-17: Ensure.al-containeractually uses CSS Grid and has predictable tracksIf
.al-containerisn't alreadydisplay: gridvia Tailwind classes in the template, thegrid-template-areashere will have no effect. Also, defining explicit columns will stabilize sizing on small screens.Proposed inline improvement:
.al-container { - grid-template-areas: + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-areas: 'logo social' 'nav nav'; }If the template already sets
gridwith Tailwind (e.g., class="grid grid-cols-2 ..."), keep that and only consider the columns suggestion here for consistency.
19-23: Confirm breakpoint intent (xl → lg) and add columns to prevent overflow at large screensRenaming the breakpoint to
@screen lgchanges when the 3-column layout kicks in; verify this aligns with design and Tailwind config. To avoid nav stretching or squeeze between logo/social, define track sizes explicitly.Proposed inline improvement:
@screen lg { .al-container { - grid-template-areas: 'logo nav social'; + grid-template-columns: auto 1fr auto; + grid-template-areas: 'logo nav social'; } }Also double-check DOM order vs visual order at lg; ensure the DOM sequence (logo → nav → social) matches the visual intent to avoid screen-reader and tab-order confusion.
libs/blog/partners/ui-partners/src/lib/partners-list/partners-list.component.html (2)
6-6: Remove redundant light:rounded-lg (already have rounded-lg)rounded-lg is applied unconditionally; the light:rounded-lg variant is redundant and adds noise.
Apply this diff:
- class="light:border light:rounded-lg aspect-[2/1] w-full max-w-[160px] rounded-lg bg-white md:max-w-[200px] lg:transition-transform lg:hover:scale-105 lg:hover:cursor-pointer lg:motion-reduce:transition-none lg:motion-reduce:hover:scale-100" + class="light:border aspect-[2/1] w-full max-w-[160px] rounded-lg bg-white md:max-w-[200px] lg:transition-transform lg:hover:scale-105 lg:hover:cursor-pointer lg:motion-reduce:transition-none lg:motion-reduce:hover:scale-100"
5-10: Improve keyboard focus visibility on interactive cardThe anchor is interactive but lacks focus-visible styles. Add focus-visible ring/outline to meet a11y expectations for keyboard users.
Example (adjust tokens/colors to your design system):
- class="light:border aspect-[2/1] w-full max-w-[160px] rounded-lg bg-white md:max-w-[200px] lg:transition-transform lg:hover:scale-105 lg:hover:cursor-pointer lg:motion-reduce:transition-none lg:motion-reduce:hover:scale-100" + class="light:border aspect-[2/1] w-full max-w-[160px] rounded-lg bg-white md:max-w-[200px] lg:transition-transform lg:hover:scale-105 lg:hover:cursor-pointer lg:motion-reduce:transition-none lg:motion-reduce:hover:scale-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"Optionally append theme-specific ring colors (e.g., light:focus-visible:ring-gray-300 dark:focus-visible:ring-white/40) consistent with your tokens.
libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html (1)
11-12: Add responsive sources (ngSrcset/sizes) to avoid overserving large imagesThe card currently serves a fixed 1215×750 image. On smaller viewports this wastes bandwidth and hurts LCP. If your image service supports multi-size URLs, wire them via NgOptimizedImage.
Example (adjust to your CDN and size breakpoints):
<img ... [ngSrc]="article().featuredImageUrl" [ngSrcset]="{ }" sizes="(max-width: 480px) 405px, (max-width: 1024px) 810px, 1215px" />libs/blog/shell/feature-shell-web/src/lib/root-shell.component.ts (1)
95-97: Optional: avoid a redundant computed wrapperYou can expose the store’s signal directly; wrapping it in computed adds an unnecessary layer.
Apply this diff if you prefer the simpler approach:
- protected readonly theme = computed(() => this._appThemeStore.theme()); + protected readonly theme = this._appThemeStore.theme;libs/blog/shared/ui-difficulty/src/lib/ui-difficulty.component.ts (1)
28-30: Verify token availability and consider a light-mode fallback for visual containment
- Ensure the new token bg-al-grey exists and is theming-consistent with the rest of the palette.
- Using bg-transparent in light mode may make the left/right blocks visually “float” on certain backgrounds. Consider a subtle, token-based fallback (e.g., a low-contrast surface token) if this causes loss of containment.
Also applies to: 80-82
libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html (1)
41-47: Consider removing redundant word-break style.The inline
style="word-break: break-word"duplicates functionality that could be handled by Tailwind'sbreak-wordsclass, which provides better consistency with the existing class-based approach.- <h3 - class="*:text-al-primary-foreground text-2xl font-bold *:not-italic" - [id]="article().slug" - style="word-break: break-word" - > + <h3 + class="*:text-al-primary-foreground text-2xl font-bold *:not-italic break-words" + [id]="article().slug" + >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
apps/blog/src/assets/icons/arrow-down.svgis excluded by!**/*.svgapps/blog/src/assets/icons/moon.svgis excluded by!**/*.svgapps/blog/src/assets/icons/sun.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (48)
libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.html(2 hunks)libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.ts(2 hunks)libs/blog/app-theme/data-access-app-theme/src/app-theme.store.ts(3 hunks)libs/blog/articles/feature-article/src/lib/article-details/article-details.component.html(1 hunks)libs/blog/articles/feature-comments/src/lib/giscus-comments/giscus-comments.component.html(1 hunks)libs/blog/articles/feature-comments/src/lib/giscus-comments/giscus-comments.component.ts(2 hunks)libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.html(1 hunks)libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.ts(0 hunks)libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html(1 hunks)libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.ts(2 hunks)libs/blog/articles/ui-article-card/src/lib/components/article-hero-card/article-hero-card-skeleton.component.ts(1 hunks)libs/blog/articles/ui-article-card/src/lib/components/article-horizontal-card/article-horizontal-card.component.html(1 hunks)libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html(3 hunks)libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.html(1 hunks)libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.scss(2 hunks)libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.ts(0 hunks)libs/blog/articles/ui-article-list-title/src/lib/ui-article-list-title/ui-article-list-title.component.html(1 hunks)libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts(2 hunks)libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.html(2 hunks)libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.ts(1 hunks)libs/blog/become-author/feature-become-author-page/src/lib/become-author-page/become-author-page.component.html(2 hunks)libs/blog/become-author/feature-become-author-page/src/lib/become-author-page/become-author-page.component.ts(2 hunks)libs/blog/become-author/feature-become-author-page/src/lib/components/become-author-list-item/become-author-list-item.component.html(1 hunks)libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-logo.component.ts(2 hunks)libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-social-media-icons.component.ts(1 hunks)libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html(1 hunks)libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.scss(1 hunks)libs/blog/layouts/ui-layouts/src/lib/header/components/header-hamburger.component.ts(1 hunks)libs/blog/layouts/ui-layouts/src/lib/header/header.component.ts(3 hunks)libs/blog/layouts/ui-navigation/src/lib/language-picker/language-picker.component.ts(1 hunks)libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.html(3 hunks)libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.ts(2 hunks)libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html(1 hunks)libs/blog/partners/ui-partners/src/lib/partners-list/partners-list.component.html(1 hunks)libs/blog/shared/ui-button/src/lib/button/button.component.ts(1 hunks)libs/blog/shared/ui-card/src/lib/card.component.ts(2 hunks)libs/blog/shared/ui-card/src/lib/card.stories.ts(1 hunks)libs/blog/shared/ui-difficulty/src/lib/ui-difficulty.component.ts(3 hunks)libs/blog/shared/ui-icon/src/lib/icon/icon.component.ts(1 hunks)libs/blog/shared/ui-pill/src/lib/pill.directive.ts(1 hunks)libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.html(1 hunks)libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.ts(2 hunks)libs/blog/shell/feature-shell-web/src/lib/root-shell.component.ts(4 hunks)libs/blog/writing-rules/feature-writing-rules/src/lib/rules-row/rules-row.component.html(2 hunks)libs/shared/assets/src/lib/styles/cookies-consent.scss(1 hunks)libs/shared/assets/src/lib/styles/main.scss(3 hunks)package.json(1 hunks)tailwind.preset.js(3 hunks)
💤 Files with no reviewable changes (2)
- libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.ts
- libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.ts
✅ Files skipped from review due to trivial changes (2)
- libs/blog/articles/ui-article-card/src/lib/components/article-hero-card/article-hero-card-skeleton.component.ts
- libs/blog/articles/ui-article-list-title/src/lib/ui-article-list-title/ui-article-list-title.component.html
🚧 Files skipped from review as they are similar to previous changes (32)
- package.json
- libs/blog/become-author/feature-become-author-page/src/lib/become-author-page/become-author-page.component.ts
- libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html
- libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.html
- libs/blog/become-author/feature-become-author-page/src/lib/components/become-author-list-item/become-author-list-item.component.html
- libs/blog/shared/ui-icon/src/lib/icon/icon.component.ts
- libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.ts
- libs/shared/assets/src/lib/styles/cookies-consent.scss
- libs/blog/articles/ui-article-card/src/lib/components/article-horizontal-card/article-horizontal-card.component.html
- libs/blog/articles/feature-comments/src/lib/giscus-comments/giscus-comments.component.html
- libs/blog/shared/ui-pill/src/lib/pill.directive.ts
- libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.scss
- libs/blog/become-author/feature-become-author-page/src/lib/become-author-page/become-author-page.component.html
- libs/blog/shared/ui-card/src/lib/card.stories.ts
- libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.ts
- libs/blog/shared/ui-card/src/lib/card.component.ts
- libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.html
- libs/blog/shared/ui-button/src/lib/button/button.component.ts
- libs/blog/layouts/ui-layouts/src/lib/header/components/header-hamburger.component.ts
- libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html
- libs/blog/layouts/ui-navigation/src/lib/language-picker/language-picker.component.ts
- libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.ts
- libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-social-media-icons.component.ts
- libs/blog/articles/feature-comments/src/lib/giscus-comments/giscus-comments.component.ts
- libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.html
- libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.ts
- libs/blog/layouts/ui-layouts/src/lib/header/header.component.ts
- libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-logo.component.ts
- libs/blog/writing-rules/feature-writing-rules/src/lib/rules-row/rules-row.component.html
- libs/blog/app-theme/data-access-app-theme/src/app-theme.store.ts
- tailwind.preset.js
- libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.html
🧰 Additional context used
🧬 Code Graph Analysis (7)
libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.ts (5)
libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.ts (1)
ArticleRegularCardComponent(22-25)libs/blog/articles/ui-article-card/src/lib/components/article-hero-card/article-hero-card.component.ts (1)
ArticleHeroCardComponent(28-30)libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.ts (1)
UiArticleCardComponent(26-30)libs/blog/authors/ui-author-card/src/lib/author-card/author-card-skeleton.component.ts (1)
AuthorCardSkeletonComponent(54-54)libs/blog/shared/ui-card/src/lib/card-skeleton.component.ts (1)
CardSkeletonComponent(34-39)
libs/blog/articles/feature-article/src/lib/article-details/article-details.component.html (4)
libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.ts (1)
UiArticleCardComponent(26-30)libs/blog/articles/ui-article-card/src/lib/components/article-hero-card/article-hero-card.component.ts (1)
ArticleHeroCardComponent(28-30)libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.ts (1)
ArticleRegularCardComponent(22-25)libs/blog/articles/feature-article/src/lib/article-details/article-details.component.ts (1)
ArticleDetailsComponent(62-69)
libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.html (2)
libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.ts (1)
UiArticleCardComponent(26-30)libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.ts (1)
ArticleRegularCardComponent(22-25)
libs/blog/shell/feature-shell-web/src/lib/root-shell.component.ts (2)
libs/blog/app-theme/data-access-app-theme/src/app-theme.store.ts (1)
AppThemeStore(11-38)apps/blog/src/app/app.component.ts (2)
AppComponent(14-43)constructor(17-29)
libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html (2)
libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.ts (1)
ArticleRegularCardComponent(22-25)libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.ts (1)
UiArticleCardComponent(26-30)
libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html (2)
libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.ts (1)
UiArticleCardComponent(26-30)libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.ts (1)
ArticleRegularCardComponent(22-25)
libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts (2)
libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.ts (1)
UiArticleCardComponent(26-30)libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.ts (1)
ArticleRegularCardComponent(22-25)
🪛 Biome (2.1.2)
libs/blog/shell/feature-shell-web/src/lib/root-shell.component.ts
[error] 92-93: Expected an identifier, a string literal, a number literal, a private field name, or a computed name but instead found '==='.
Expected an identifier, a string literal, a number literal, a private field name, or a computed name here.
(parse)
[error] 98-99: Expected an identifier, a string literal, a number literal, a private field name, or a computed name but instead found '>'.
Expected an identifier, a string literal, a number literal, a private field name, or a computed name here.
(parse)
[error] 99-99: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 99-99: expected a semicolon to end the class property, but found none
(parse)
[error] 99-99: expected a semicolon to end the class property, but found none
(parse)
[error] 99-99: expected a semicolon to end the class property, but found none
(parse)
[error] 99-99: Expected an identifier, a string literal, a number literal, a private field name, or a computed name but instead found '-'.
Expected an identifier, a string literal, a number literal, a private field name, or a computed name here.
(parse)
[error] 99-99: expected a semicolon to end the class property, but found none
(parse)
[error] 99-99: Expected an identifier, a string literal, a number literal, a private field name, or a computed name but instead found ')'.
Expected an identifier, a string literal, a number literal, a private field name, or a computed name here.
(parse)
[error] 99-99: Duplicate class member name "theme"
(lint/suspicious/noDuplicateClassMembers)
🔇 Additional comments (21)
libs/blog/partners/ui-partners/src/lib/partners-list/partners-list.component.html (1)
12-17: Verify alt text semantics for logosIf partner.asset_URL represents a logo, alt should be the partner name (not empty and not “logo”). If the image is purely decorative and the partner name is elsewhere in accessible text, alt should be an empty string.
libs/blog/shell/feature-shell-web/src/lib/root-shell.component.ts (2)
36-39: Header theming bindings look correctWiring [theme] and (themeToggle) to the header matches the new API and keeps the RootShell as a thin coordinator. Once the theme signal is defined (see conflict fix below), this should work as intended.
127-129: Theme toggle handler correctly delegates to the storeThis keeps the component logic minimal and defers the side effects (DOM attribute + localStorage) to the store. LGTM.
libs/blog/articles/feature-article/src/lib/article-details/article-details.component.html (1)
56-56: Good: [articleCard] input correctly wired for author card renderingThis aligns with the new input contract and should enable the intended article-specific styling.
libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.ts (1)
48-49: Inputs added are clear and default-safehideGradient and articleCard are well-scoped booleans with sane defaults and are forwarded in the template. No functional concerns.
libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.html (3)
17-19: Good: dynamic text color via whiteFont()Using [ngClass] here keeps static spacing/weight styles separate from theme-dependent color. Clean pattern.
30-32: Good: consistent external link themingSame pattern applied to external links maintains parity with internal anchors.
4-7: NgClass Already ImportedNgClass is correctly imported from
@angular/commoninnavigation.component.ts, so no runtime error will occur. No further changes needed.libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.html (2)
2-5: Good: forwarding new inputs to the template[articleCard] and [hideGradient] are correctly exposed to the template, matching the new API.
48-48: Good: text token aligns with themeAdding text-al-foreground to the author name maintains readability across themes.
libs/shared/assets/src/lib/styles/main.scss (3)
8-24: LGTM! Well-structured theme token system implementation.The implementation of theme-scoped CSS variables using
data-themeattributes is well-structured and follows best practices. The token organization is logical, and the values are appropriately defined for each theme.
26-35: LGTM! Light theme tokens are properly defined.The light theme tokens are well-defined with appropriate values. The contrast between dark and light themes is clearly established through the token values (e.g., background switching from dark
16 15 21to light255 255 255).
90-94: Dark mode configuration verifiedTailwind is set to
darkMode: 'selector'and includes a plugin that addslight:anddark:variants scoped to[data-theme="light"]and[data-theme="dark"]. The classdark:text-blue-400will correctly apply whendata-theme="dark"is present. No further changes needed.libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html (3)
10-17: LGTM! Proper NgOptimizedImage implementation with priority support.The featured image implementation correctly uses
NgOptimizedImagewith explicit dimensions and priority binding from the component input. The fallback to placeholder image is appropriate.
21-29: LGTM! Avatar component properly configured with priority support.The avatar component correctly receives the priority input, ensuring consistent image loading behavior across the card. The author name styling uses the theme-aware primary-foreground color token.
48-50: LGTM! Excerpt styling uses theme-aware color tokens.The excerpt paragraph correctly uses the
*:text-al-pinkcolor token and appropriate typography classes for consistent theming.libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts (5)
1-1: LGTM! Proper Angular imports added.The import statement correctly adds
computedandinputfrom Angular core to support the new reactive inputs and computed properties.
16-16: LGTM! Dynamic gradient control implementation.The binding
[hideGradient]="hideGradient()"properly connects the component input to the gradient card directive, enabling runtime control of the gradient visibility.
20-20: LGTM! Dynamic class binding implementation.The class bindings using computed properties provide clean, reactive styling based on component inputs. This approach maintains good separation of concerns.
Also applies to: 24-24
43-44: LGTM! Well-structured component inputs.The input properties are properly typed with sensible defaults. The
hideGradientdefaults totrueandarticleCarddefaults tofalse, which align with the expected common usage patterns.
46-54: LGTM! Efficient computed properties for dynamic styling.The computed properties provide clean, reactive class generation based on component state. The conditional logic properly handles both article card and standard layouts, and the theme-aware classes align with the CSS variable system.
| (article().featuredImageUrl || 'assets/article-placeholder.webp') + | ||
| ')' | ||
| " | ||
| class="relative h-full overflow-hidden rounded-lg bg-black bg-cover bg-no-repeat transition-transform hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100" |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Hard-coded bg-black undermines light-mode theming
Using bg-black forces a dark card in all themes. For light mode, this should be theme-driven (CSS vars or theme variants), not a fixed color.
Consider replacing with a theme-aware class/token (examples, adjust to your setup):
- If using data-theme variants:
bg-white text-gray-900 [data-theme=dark]:bg-black [data-theme=dark]:text-white - If using project tokens:
bg-al-background text-al-foreground
Would you like me to generate a patch once you confirm the preferred tokens/variants?
#!/bin/bash
# Locate Tailwind config file
config_file=$(fd 'tailwind.config.*' -t f | head -n1)
echo "Tailwind config file: $config_file"
if [ -n "$config_file" ]; then
echo "=== Showing first 200 lines of $config_file ==="
sed -n '1,200p' "$config_file"
fi
# Check for DaisyUI plugin usage
echo "=== Searching for DaisyUI references ==="
rg -n "daisyui" .
# Check for custom theme tokens
echo "=== Searching for 'bg-al-background' ==="
rg -n "bg-al-background" .
echo "=== Searching for 'al-background' ==="
rg -n "al-background" .
# Check for data-theme attribute usage
echo "=== Searching for 'data-theme' ==="
rg -n "data-theme" .
# Check for Tailwind dark variant usage
echo "=== Searching for 'dark:' classes ==="
rg -n "dark:" .🏁 Script executed:
#!/bin/bash
# Locate Tailwind config file
config_file=$(fd 'tailwind.config.*' -t f | head -n1)
echo "Tailwind config file: $config_file"
if [ -n "$config_file" ]; then
echo "=== Showing first 200 lines of $config_file ==="
sed -n '1,200p' "$config_file"
fi
# Check for DaisyUI plugin usage
echo "=== Searching for DaisyUI references ==="
rg -n "daisyui" .
# Check for custom theme tokens
echo "=== Searching for 'bg-al-background' ==="
rg -n "bg-al-background" .
echo "=== Searching for 'al-background' ==="
rg -n "al-background" .
# Check for data-theme attribute usage
echo "=== Searching for 'data-theme' ==="
rg -n "data-theme" .
# Check for Tailwind dark variant usage
echo "=== Searching for 'dark:' classes ==="
rg -n "dark:" .Length of output: 9683
Hard-coded bg-black breaks light-mode theming
Replace the fixed black background with your project’s theme tokens so the card adapts to both light and dark modes. For example, to match the regular card component you could use the al-card token:
• File:
libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html
• Lines: 3
Suggested diff:
--- a/libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html
+++ b/libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html
@@ -1,4 +1,4 @@
- class="relative h-full overflow-hidden rounded-lg bg-black bg-cover bg-no-repeat transition-transform hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100"
+ class="relative h-full overflow-hidden rounded-lg bg-al-card bg-cover bg-no-repeat transition-transform hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100"If you need a distinct dark-mode override, you can also add a dark: variant (e.g. dark:bg-al-background).
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| class="relative h-full overflow-hidden rounded-lg bg-black bg-cover bg-no-repeat transition-transform hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100" | |
| class="relative h-full overflow-hidden rounded-lg bg-al-card bg-cover bg-no-repeat transition-transform hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100" |
🤖 Prompt for AI Agents
In
libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html
around line 3, the class uses a hard-coded bg-black which breaks light-mode
theming; replace bg-black with the project's theme token (e.g. bg-al-card) and
optionally add a dark: variant (e.g. dark:bg-al-background) so the card adapts
to both light and dark modes while preserving the other utility classes.
| <img | ||
| alt="Post featured image" | ||
| class="absolute h-auto w-full bg-contain opacity-20" | ||
| [ngSrc]="article().featuredImageUrl || 'assets/article-placeholder.webp'" | ||
| [priority]="imagePriority()" | ||
| width="1215" | ||
| height="750" | ||
| /> |
There was a problem hiding this comment.
Absolute image needs correct positioning and object-fit; fix wrong Tailwind class; clarify accessibility; ensure priority boolean
- The absolute img lacks positioning (top/left/inset), so it may not anchor to the container’s top-left.
- bg-contain is a background-image utility; for
use object-contain/object-cover.
- The image appears decorative (background), so alt="" with aria-hidden is more appropriate to avoid noisy SR output.
- [priority] expects boolean (NgOptimizedImage). Passing number|null relies on coercion. Be explicit.
Apply this diff:
- <img
- alt="Post featured image"
- class="absolute h-auto w-full bg-contain opacity-20"
- [ngSrc]="article().featuredImageUrl || 'assets/article-placeholder.webp'"
- [priority]="imagePriority()"
- width="1215"
- height="750"
- />
+ <img
+ alt=""
+ aria-hidden="true"
+ class="absolute inset-0 z-0 h-full w-full object-cover opacity-20"
+ [ngSrc]="article().featuredImageUrl || 'assets/article-placeholder.webp'"
+ [priority]="!!imagePriority()"
+ width="1215"
+ height="750"
+ />Notes:
- If you prefer to keep the image informative, bind alt to the title instead:
alt="{{ article().title }}"(but avoid duplicating the visible title for SRs). - If cropping is undesirable, use
object-contain object-centerinstead ofobject-cover.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <img | |
| alt="Post featured image" | |
| class="absolute h-auto w-full bg-contain opacity-20" | |
| [ngSrc]="article().featuredImageUrl || 'assets/article-placeholder.webp'" | |
| [priority]="imagePriority()" | |
| width="1215" | |
| height="750" | |
| /> | |
| <img | |
| alt="" | |
| aria-hidden="true" | |
| class="absolute inset-0 z-0 h-full w-full object-cover opacity-20" | |
| [ngSrc]="article().featuredImageUrl || 'assets/article-placeholder.webp'" | |
| [priority]="!!imagePriority()" | |
| width="1215" | |
| height="750" | |
| /> |
🤖 Prompt for AI Agents
In
libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html
around lines 6-13, the <img> is absolute but lacks positioning and uses a
background utility; change the Tailwind classes to include explicit positioning
(e.g. top-0 left-0 w-full h-full) and use an object-fit utility (object-cover or
object-contain object-center) instead of bg-contain; mark the image as purely
decorative by setting alt="" and aria-hidden="true" (or if you want it
informative bind alt to article().title instead), and make the priority binding
an explicit boolean (e.g. [priority]="!!imagePriority()" or
[priority]="imagePriority() === true") so NgOptimizedImage receives a boolean.
| width="1215" | ||
| height="750" | ||
| /> | ||
| <div class="relative flex h-full flex-col justify-between text-[#fff]"> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Text color hard-coded; add stacking safety for content layer
- text-[#fff] bypasses theme tokens and may clash in light mode.
- Ensure content is layered above the overlay/image explicitly.
Apply this diff to enforce stacking (and drop hard-coded hex if tokens exist):
- <div class="relative flex h-full flex-col justify-between text-[#fff]">
+ <div class="relative z-20 flex h-full flex-col justify-between text-al-foreground">If text-al-foreground is unavailable, use your theme variant equivalents (e.g., text-gray-900 [data-theme=dark]:text-white).
Additionally, update the overlay (outside this range) to sit between image and content and ignore pointer events:
<!-- Line 16 update example -->
<div class="absolute inset-0 z-10 h-full w-full pointer-events-none hover:bg-al-bottom-radial-gradient"></div>| @@ -1,6 +1,6 @@ | |||
| <a [routerLink]="['/', article().slug] | alLocalize"> | |||
| <article | |||
| class="bg-al-card md:hover:shadow-al-primary group relative h-full w-full rounded-lg border border-transparent shadow-none transition-transform motion-reduce:transition-none lg:hover:scale-105 lg:motion-reduce:hover:scale-100" | |||
| class="bg-al-card md:hover:shadow-al-primary group relative h-full w-full rounded-lg border shadow-none transition-transform motion-reduce:transition-none lg:hover:scale-105 lg:motion-reduce:hover:scale-100 dark:border-transparent" | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
Inconsistent border approach between themes.
The border styling uses border with dark:border-transparent, but this conflicts with the theme-scoped approach established in the main.scss file. Consider using the --border CSS variable consistently across both themes instead of overriding with Tailwind's dark variant.
- class="bg-al-card md:hover:shadow-al-primary group relative h-full w-full rounded-lg border shadow-none transition-transform motion-reduce:transition-none lg:hover:scale-105 lg:motion-reduce:hover:scale-100 dark:border-transparent"
+ class="bg-al-card md:hover:shadow-al-primary group relative h-full w-full rounded-lg border-al-border shadow-none transition-transform motion-reduce:transition-none lg:hover:scale-105 lg:motion-reduce:hover:scale-100"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| class="bg-al-card md:hover:shadow-al-primary group relative h-full w-full rounded-lg border shadow-none transition-transform motion-reduce:transition-none lg:hover:scale-105 lg:motion-reduce:hover:scale-100 dark:border-transparent" | |
| class="bg-al-card md:hover:shadow-al-primary group relative h-full w-full rounded-lg border-al-border shadow-none transition-transform motion-reduce:transition-none lg:hover:scale-105 lg:motion-reduce:hover:scale-100" |
🤖 Prompt for AI Agents
In
libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html
around line 3, the element uses Tailwind's generic border class plus
dark:border-transparent which conflicts with the theme-scoped border variable;
replace the hard-coded border classes with the theme-aware border variable
approach (use the --border CSS variable for border color/width via an
appropriate utility or inline style and remove the dark: override) so both light
and dark themes rely on the main.scss --border value; ensure the element no
longer uses the plain "border" and "dark:border-transparent" classes and instead
applies the border using the --border variable consistent with the rest of the
app.
| Expand | ||
| Down | ||
| > |
There was a problem hiding this comment.
Remove extraneous text nodes from template.
The template contains standalone text nodes "Expand" and "Down" that appear to be leftover content or debugging artifacts and should be removed.
<div
class="flex w-full flex-col items-center gap-4 md:max-w-[360px]"
- Expand
- Down
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| Expand | |
| Down | |
| > | |
| <div | |
| class="flex w-full flex-col items-center gap-4 md:max-w-[360px]" | |
| > |
🤖 Prompt for AI Agents
In
libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts
around lines 28 to 30, there are stray text nodes "Expand" and "Down" in the
template; remove these standalone text nodes so only intended elements and
bindings remain (delete the two words and any surrounding whitespace/newlines so
the template contains only valid markup and components).
| @@ -3,7 +3,7 @@ | |||
| > | |||
| @for (partner of partnersList(); track partner.asset_URL) { | |||
| <a | |||
| class="aspect-[2/1] w-full max-w-[160px] rounded-lg bg-white md:max-w-[200px] lg:transition-transform lg:hover:scale-105 lg:hover:cursor-pointer lg:motion-reduce:transition-none lg:motion-reduce:hover:scale-100" | |||
| class="light:border light:rounded-lg aspect-[2/1] w-full max-w-[160px] rounded-lg bg-white md:max-w-[200px] lg:transition-transform lg:hover:scale-105 lg:hover:cursor-pointer lg:motion-reduce:transition-none lg:motion-reduce:hover:scale-100" | |||
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Confirm light: variant configuration and consider explicit border color
Ensure the Tailwind theme-variants setup defines a light variant that matches your runtime selector. Also, consider specifying a light border color (e.g., light:border-gray-200) to avoid defaulting to currentColor, which may be inconsistent across themes.
If helpful, run this script to verify configuration and usages:
🏁 Script executed:
#!/bin/bash
# Check Tailwind configuration and usages of light: variant
rg -nA3 $'themeVariants|light:' --hidden
# Inspect darkMode selector configuration
rg -n $'darkMode\\s*:\\s*[\'"]selector[\'"]' --hidden
# Spot border without explicit color under light:
rg -n $'light:border(\\s|")' --hiddenLength of output: 3057
🏁 Script executed:
#!/bin/bash
# Display full Tailwind preset configuration to verify themeVariants plugin usage
cat tailwind.preset.jsLength of output: 2563
Light variant is configured – add explicit border color
The light: variant is correctly registered in tailwind.preset.js via your custom plugin, so the prefix will work at runtime. However, using light:border alone defaults the border color to currentColor, which may vary between themes. It’s clearer and more consistent to pick a specific color (for example your al-border token or a gray scale):
• File: libs/blog/partners/ui-partners/src/lib/partners-list/partners-list.component.html
Line 6
Suggested change:
- class="light:border light:rounded-lg aspect-[2/1] w-full max-w-[160px] rounded-lg bg-white …"
+ class="light:border-al-border light:rounded-lg aspect-[2/1] w-full max-w-[160px] rounded-lg bg-white …"You may also want to update other instances (e.g., in ui-article-card) where light:border is used without a color.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| class="light:border light:rounded-lg aspect-[2/1] w-full max-w-[160px] rounded-lg bg-white md:max-w-[200px] lg:transition-transform lg:hover:scale-105 lg:hover:cursor-pointer lg:motion-reduce:transition-none lg:motion-reduce:hover:scale-100" | |
| class="light:border-al-border light:rounded-lg aspect-[2/1] w-full max-w-[160px] rounded-lg bg-white md:max-w-[200px] lg:transition-transform lg:hover:scale-105 lg:hover:cursor-pointer lg:motion-reduce:transition-none lg:motion-reduce:hover:scale-100" |
🤖 Prompt for AI Agents
In
libs/blog/partners/ui-partners/src/lib/partners-list/partners-list.component.html
around line 6, the class uses the light: variant as light:border which leaves
the border color to currentColor; change it to an explicit color token such as
light:border-al-border or a specific gray like light:border-gray-200 to ensure
consistent styling across themes, and update any other occurrences (e.g.,
ui-article-card) where light:border is used without a color.
| 'dark:shadow-al-full-background shadow-transparent': | ||
| isColorBackground(), | ||
| 'shadow-al-full-border': !isColorBackground(), |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Replace non-standard 'shadow-transparent' with 'shadow-none'
Tailwind doesn’t ship a shadow-transparent utility by default. If it isn’t defined in your preset/theme, this class will do nothing and could be purged. shadow-none is the standard way to remove shadows.
Apply this diff:
- 'dark:shadow-al-full-background shadow-transparent':
+ 'dark:shadow-al-full-background shadow-none':
isColorBackground(),🏁 Script executed:
#!/bin/bash
# Locate Tailwind configuration files
configs=$(fd 'tailwind.config.*' . || echo "")
if [ -n "$configs" ]; then
echo "Found Tailwind config files:"
echo "$configs"
for c in $configs; do
echo "----- $c -----"
grep -R "shadow" "$c" -n || true
done
else
echo "No Tailwind config file found"
fi
# Search codebase for usage of shadow-transparent and shadow-none
echo "Occurrences of 'shadow-transparent':"
rg "shadow-transparent" -n || echo "None found"
echo "Occurrences of 'shadow-none':"
rg "shadow-none" -n || echo "None found"Length of output: 1714
Replace non-standard shadow-transparent with shadow-none
Tailwind doesn’t ship a shadow-transparent utility by default—if it isn’t defined in your config, it will be purged and have no effect. Use the standard shadow-none to remove shadows, as seen elsewhere in the codebase.
• File: libs/blog/shared/ui-difficulty/src/lib/ui-difficulty.component.ts (lines 47–49)
- 'dark:shadow-al-full-background shadow-transparent': isColorBackground(),
+ 'dark:shadow-al-full-background shadow-none': isColorBackground(),📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| 'dark:shadow-al-full-background shadow-transparent': | |
| isColorBackground(), | |
| 'shadow-al-full-border': !isColorBackground(), | |
| 'dark:shadow-al-full-background shadow-none': | |
| isColorBackground(), | |
| 'shadow-al-full-border': !isColorBackground(), |
🤖 Prompt for AI Agents
In libs/blog/shared/ui-difficulty/src/lib/ui-difficulty.component.ts around
lines 47 to 49, the class map uses a non-standard Tailwind utility
'shadow-transparent' which may be purged or have no effect; replace it with the
standard 'shadow-none' wherever you intend to remove shadows (and keep
'shadow-al-full-border' when !isColorBackground()). Update the conditional
branch to use 'shadow-none' instead of 'shadow-transparent' so the shadow is
reliably removed.
| @@ -23,6 +23,7 @@ import { | |||
| AdImageBanner, | |||
| AlBannerCarouselComponent, | |||
| } from '@angular-love/blog/shared/ad-banner'; | |||
| import { AppThemeStore } from '@angular-love/data-access-app-theme'; | |||
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify the import alias for AppThemeStore resolves in this repo
The alias '@angular-love/data-access-app-theme' may differ from your Nx library's configured path (often '@angular-love/blog/app-theme/data-access-app-theme'). Please verify the alias exists in tsconfig path mappings and that the library barrel exports AppThemeStore.
Run the following to verify the alias and exports:
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Locate AppThemeStore source =="
fd -a 'app-theme.store.ts' | sed -n '1,50p'
echo "== Confirm AppThemeStore and Theme are exported =="
rg -n "export (const|type) AppThemeStore|export type Theme" -S
echo "== Check for existing imports using the same alias =="
rg -n "from ['\"]@angular-love/data-access-app-theme['\"]"
echo "== Look for HeaderComponent theme API (Input/Output) =="
fd -a 'header.component.ts' | while read -r f; do
echo "File: $f"
rg -n "@Input\\(\\)\\s*theme|@Output\\(\\)\\s*themeToggle" "$f" || true
doneLength of output: 2323
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Check tsconfig path mapping for '@angular-love/data-access-app-theme' =="
rg -n '"@angular-love/data-access-app-theme"' tsconfig*.json
echo
echo "== Inspect library barrel at libs/blog/app-theme/data-access-app-theme/src/index.ts =="
INDEX_FILE="libs/blog/app-theme/data-access-app-theme/src/index.ts"
if [ -f "$INDEX_FILE" ]; then
echo "Found $INDEX_FILE"
rg -n "export .*AppThemeStore" "$INDEX_FILE" || echo "⚠️ No explicit export of AppThemeStore in barrel"
else
echo "⚠️ $INDEX_FILE not found"
fiLength of output: 957
Export AppThemeStore in the library barrel
The path alias @angular-love/data-access-app-theme is correctly configured in tsconfig.base.json, but the barrel at libs/blog/app-theme/data-access-app-theme/src/index.ts does not re-export AppThemeStore. This prevents the import in root-shell.component.ts from resolving.
Please update the barrel:
• File: libs/blog/app-theme/data-access-app-theme/src/index.ts
+ export { AppThemeStore, type Theme } from './app-theme.store';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { AppThemeStore } from '@angular-love/data-access-app-theme'; | |
| // libs/blog/app-theme/data-access-app-theme/src/index.ts | |
| + export { AppThemeStore, type Theme } from './app-theme.store'; |
🤖 Prompt for AI Agents
In libs/blog/shell/feature-shell-web/src/lib/root-shell.component.ts around line
26 the import from @angular-love/data-access-app-theme fails because the library
barrel does not re-export AppThemeStore; open
libs/blog/app-theme/data-access-app-theme/src/index.ts and add an export for
AppThemeStore (export { AppThemeStore } from
'./lib/<correct-file-or-folder-path-containing-AppThemeStore>';), save and run a
build or TypeScript watch to verify the import resolves.
libs/blog/shell/feature-shell-web/src/lib/root-shell.component.ts
Outdated
Show resolved
Hide resolved
|
PR is detected, will deploy to dev environment |
|
Deployed to dev environment |
Readded light-mode branch in order to have the possibility to test it out.
Summary by CodeRabbit
New Features
Enhancements
Bug Fixes
Chores